<template>
  <div class="tablemode">
    <div class="act">
      <el-button round>新建会议</el-button>
      <el-button round>复制会议</el-button>
    </div>
    <!-- 查询功能 -->
    <div class="check">
      <el-input placeholder="会议主题"></el-input>
      <el-button round>查询</el-button>
    </div>
    <!-- 表格 -->
    <div class="table">
      <div class="lib"><svg-icon icon-class='lib'></svg-icon>议题库</div>
    <el-table
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    ref="table"
    >
    <el-table-column
      type="selection"
      width="28">
    </el-table-column>
    <el-table-column
      label="会议主题"
      align="center" width="210" >
      <template #default="scope">{{ scope.row.address }}</template>
    </el-table-column>
    <el-table-column
      label="会议室"
      align="center" width="210">
      <template #default="scope">{{ scope.row.address }}</template>
    </el-table-column>
    <el-table-column
      label="会议标语"
      align="center" width="70">
      <template #default="scope">{{scope.row.row}}</template>
    </el-table-column>
    <el-table-column
      label="开始时间"
      align="center" width="120" >
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      label="结束时间"
      align="center" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      label="是否开启"
      align="center" >
    </el-table-column>
    <el-table-column
      label="组织者"
      align="center" width="70">
      <template #default="scope">{{ scope.row.row }}</template>
    </el-table-column>
    <el-table-column
      label="创建时间"
      align="center" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
        <el-table-column
          label="操作"
          align="center" width="220"  class="btn">
          <el-button round>编辑</el-button>
          <el-button round>结束</el-button>
          <el-button round>通知</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      :total="400"
      class="page"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      value:true,
      tableData:[{
            date: '2016-05-03 10:30',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            row:'阿萨德'
          },{
            date:'2016-05-03 10:30',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            row:'阿萨德'
          }],
      multipleSelection: [],
      colWidthList:[],
      currentPage:1 //页数
    }
  },
  methods: {
    handleSelectionChange(val) {
          this.multipleSelection = val;
        },
  },
}
</script>

<style lang="scss" scoped>
  .act {
    display: flex;
    .el-button {
      display: flex;
      justify-content: center;
      width: 96px;
      height: 40px;
      background-color: #4745C5;
      font-size: 18px;
      color: #fff;
      margin-right: 15px;
      margin-bottom: 12px;
      margin-top: 10px;
    }
  }
  // 查询
  .check{
    display: flex;
    .el-input{
      width: 360px;
      border: 1px solid #D6D6D6;
      border-radius: 5px;
      outline: medium;
    }
    .el-button {
      width: 96px;
      height: 40px;
      color: #fff;
      line-height: 15px;
      font-size: 18px;
      background-color: #4745C5;
      margin-left: 20px;
    }
  }

  // 表格
  .table {
    position: relative;
    margin-top: 13px;
    border:1px solid #D6D6D6;
    font-size: 15px;
    
    box-shadow: 4px 3px 7px 0px #D6D6D6;
    .el-table {
      height: 760px ;
    }
    .page {
      display: flex;
      align-items: center;
      height: 50px;
    }
    .lib {
      position: absolute;
      top: -28px;
      right: 5px;
      color: #4745C5;
      font-size: 22px;
    }
      .el-button {
        float: left;
        background-color: #4745C5;
        font-size: 15px;
        width: 75px;
        height: 30px;
        line-height: 6px;
        color: #fff;
      }    
  }
</style>